<template>
  <div class="row justify-between items-center link-item q-px-md">
    <div class="left row items-center">
      <div class="handle">
        <q-icon name="mdi-drag-vertical" size="22px" color="sub" />
      </div>
      <q-icon class="q-mx-md" :name="getTypeIcon()" size="22px" />
      <a :href="link.link" target="_blank">{{ link.link }}</a>
    </div>
    <div clas="right row items-center">
      <q-btn flat dense round icon="mdi-pencil" color="sub" @click="edit" />
      <q-btn
        flat
        dense
        round
        :icon="link.visible ? 'mdi-eye' : 'mdi-eye-off'"
        color="sub"
        @click="changeVisible"
      />
      <q-btn flat dense round icon="mdi-close" color="sub" @click="remove" />
    </div>
  </div>
</template>
<script setup lang="ts">
import SocialLink from 'src/models/SocialLink';
import { useUserStore } from 'src/stores/user-store';
import { PropType } from 'vue';
const userStore = useUserStore();
const props = defineProps({
  link: {
    type: Object as PropType<SocialLink>,
    required: true,
  },
});
const emits = defineEmits(['edit']);
const getTypeIcon = () => {
  let iconName = '';
  switch (props.link.type) {
    case 'facebook':
      {
        iconName = 'mdi-facebook';
      }
      break;
    case 'twitter':
      {
        iconName = 'mdi-twitter';
      }
      break;
    case 'linkedin':
      {
        iconName = 'mdi-linkedin';
      }
      break;
    case 'twitch':
      {
        iconName = 'mdi-twitch';
      }
      break;
    case 'youtube':
      {
        iconName = 'mdi-youtube';
      }
      break;
    default: {
      iconName = 'mdi-help-circle';
    }
  }
  return iconName;
};
const edit = () => {
  emits('edit', props.link);
};
const changeVisible = async () => {
  let params = JSON.parse(JSON.stringify(props.link));
  params.visible = !props.link.visible;
  await userStore.putSocialLink(params);
};
const remove = async () => {
  await userStore.removeSocialLink(props.link);
};
</script>
<style lang="sass" scoped>

.link-item
  width: 100%
  height: 54px
  background-color: #1C1C1C
  a
    font-size: 14px
    color: $accent
    text-decoration: none
  .handle
    cursor: move
  .ghost
    opacity: 0.5
    background-color: red
</style>
